<template>
  <div class="top-right-left flex cursor-pointer">
    <div class="flex" v-for="data in creditProData" @click="goTo(data.url)">
        <div class="leftImg"><img :src="data.imgUrl" alt=""></div>
        <div class="theme-name">{{data.theme}}</div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      creditProData: {
        type: Array,
        default(){
          return []
        }
      }
    },
    methods: {
      goTo(u) {
        window.location.href = u
      }
    }
  }
</script>
<style scoped lang="less">

@import "../common/less/variable.less";

  .cursor-pointer {
    cursor: pointer;
  }
  .leftImg {
    width: .5rem;
    height: .5rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .theme-name {
    line-height: .5rem;
  }
  .flex + .flex {
    margin-left: .2rem;
  }
</style>